﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <title>身份信息</title>
    <link href="https://at.alicdn.com/t/font_528879_ogzh9k2sqxnzsemi.css" rel="stylesheet" />
    <link href="../css/public.css" rel="stylesheet" />
    <style>
          .content {
            width:100%;
            padding:0;
        }
        #MenuList {
            position: absolute;
            right: 5px;
            top: 10px;
            font-size: 25px;
            z-index: 9;
            color: black;
            text-decoration: none;
        }

        .content .IdImg {
            width: 50%;
            height: 40px;
            margin: 10px auto;
            background: url(../Images/border2.png);
            background-size: 100% 100%;
            line-height: 40px;
            text-align: center;
        }

        .content .productInfo {
            border: 1px solid #D6D6D6;
            width: 94%;
            margin: 10px auto;
            border-bottom: none;
        }

            .content .productInfo > li {
                height: 30px;
                line-height: 30px;
                display: flex;
                border-bottom: 1px solid #D6D6D6;
            }

                .content .productInfo > li > span:nth-child(1) {
                    width: 80px;
                    text-align: right;
                    background: #F2F2F2;
                }

                .content .productInfo > li > span:nth-child(2) {
                    flex: 1;
                    background: #FEFEFE;
                }
      .climate {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height:15%;
        }

        /*底部按钮*/
        .content .footer_btn_con {
            width: 100%;
            position:absolute;
            bottom:0;
            height:20%;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:space-around
        }

        .content .footer_btn {
            width: 100%;
            display: flex;
        }

            .content .footer_btn .btn_item {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                color: #504c4c;
                text-decoration: none;
            }

                .content .footer_btn .btn_item .baoyang_logo {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    color: white;
                    text-align: center;
                    line-height: 40px;
                    margin-bottom: 5px;
                }

                .content .footer_btn .btn_item > span:nth-child(2) {
                    font-size: 14px;
                }
        /*背景列表层*/
        .bg_list {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(68,67,67,0.8);
            z-index: 100;
        }
        [v-cloak] { display: none }

            .bg_list .MenuList {
                position: absolute;
                width: 30%;
                height: 100%;
                right: 0;
                background: rgb(68,67,67);
                z-index: 102;
            }

                .bg_list .MenuList > li a {
                    display: block;
                    text-align: center;
                    padding: 7px 0;
                    border-bottom: 1px solid #757575;
                    color: white;
                    text-decoration: none;
                }
    </style>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>

</head>
<body>
    <div class="content" id="content">
        <a id="MenuList" class="iconfont icon-liebiao1" @click="MenuList()"></a>
        <div v-cloak class="bg_list" v-if="isShow" @click="HideMenu()">
            <ul class="MenuList" @click.stop="stop()">
                <li><a href="BrandCulture.html">品牌文化</a></li>
                <li><a href="CraftShow.html">生产流程</a></li>
                <li><a href="CraftShow.html">工艺展示</a></li>
                <li><a href="HonorCertificate.html">荣誉证书</a></li>
                <li><a href="ProductStory.html">传承故事</a></li>
                <li><a href="CityPartner.html">合作伙伴</a></li>
            </ul>

        </div>
        <div class="IdImg">
            传承身份ID信息
        </div>
        <ul class="productInfo">
            <li>
                <span>身份码：</span>
                <span>5512312312312</span>
            </li>
            <li>
                <span>品牌：</span>
                <span>5512312312312</span>
            </li>
            <li>
                <span>型号：</span>
                <span>5512312312312</span>
            </li>
            <li>
                <span>规格：</span>
                <span>5512312312312</span>
            </li>
            <li>
                <span>名称：</span>
                <span>5512312312312</span>
            <li>
                <span>材料：</span>
                <span>5512312312312</span>
            </li>
            <li>
                <span>工艺：</span>
                <span>5512312312312</span>
            </li>
            <li>
                <span>产地：</span>
                <span>5512312312312</span>
            </li>
            <li>
                <span>服务热线：</span>
                <span>5512312312312</span>
            </li>

        </ul>
        <p style="padding:0 10px;">
            当前地址：
            <span>上海</span>
            当前时间：
            <span>2017-02-01</span>
        </p>
        <div class="climate">

            <span style="color:#E54444;font-size:40px">4</span>
            <div>
                <p><span>天气：</span>多云</p>
                <p><span>温度：</span>适度</p>
                <p><span>湿度：</span>空气</p>
            </div>
            <span class="iconfont icon-shipin1" style="color:#E54444;font-size:40px"></span>
        </div>
        <div class="footer_btn_con">
            <div class="IdImg">
                维护保养
            </div>
            <div class="footer_btn">
                <a href="Spring.html" class="btn_item">
                    <div class="baoyang_logo" style="background:#ADC883">春</div>
                    <span>春季保养</span>
                </a>
                <a href="Summer.html" class="btn_item">
                    <div class="baoyang_logo" style="background:#99C9FF">夏</div>
                    <span>夏季保养</span>
                </a>
                <a href="Fall.html" class="btn_item">
                    <div class="baoyang_logo" style="background:#FF9A00">秋</div>
                    <span>秋季保养</span>
                </a>
                <a href="Winter.html" class="btn_item">
                    <div class="baoyang_logo" style="background:#CCCCCC">冬</div>
                    <span>冬季保养</span>
                </a>
            </div>

        </div>
        
    </div>

</body>
</html>

<script>
    new Vue({
        el: '#content',
        data: {
            message: '<h1>菜鸟教程</h1>',
            isShow:false
        },
        methods: {
            MenuList: function () {
                this.isShow = !this.isShow;
            },
            HideMenu: function () {
                this.isShow = !this.isShow;
            }
            ,
            stop: function () {}//阻止冒泡
        }
    })
</script>
